<template>
  <div>
    <el-cascader
      clearable
      @change="changeAddress"
      v-model="District"
      placeholder="请选择"
      :options="areaList"
      filterable
      :change-on-select="changeOnSelect"
    ></el-cascader>
  </div>
</template>

<script>
import { getAllInfoTree  } from "@/api/login";

export default {
  name: "SelectAddress",
  props: {
    provinceValue: {
      type: String,
      default: ''
    },
    cityValue: {
      type: String,
      default: ''
    },
    districtValue: {
      type: String,
      default: ''
    },
    AreaList: {
      type: Array,
      default: function () {
        return []
      }
    },
    changeOnSelect: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      District:[],
      areaList: [],
    };
  },
  watch:{
    districtValue: {
      handler(val) {
        if (val) {
          if(val%100===0)  //至少是省市
          {
            if(val%10000===0)  //省
            {
              //加载省
              this.District=[val]
            }
            else
            {
              //加载省市
              this.District=[val.slice(0,2)+'0000',val]
            }
          }
          else  //是省市区
          {
            //加载省市区
            this.District=[val.slice(0,2)+'0000',val.slice(0,4)+'00',val]
          }
        } else {
          this.District = [];
        }
      },
      deep: true,
      immediate: true,
    },
    AreaList: {
      handler(val) {
        if (val.length) {
          this.areaList=val
        }
      },
      deep: true,
      immediate: true,
    },
    changeOnSelect: {
      handler(val) {
        if (val) {
          if(this.cityValue!=='0'&&this.cityValue!=='')
          {
            if(this.districtValue!=='0'&&this.districtValue!=='')
            {
              //加载省市区
              this.District=[this.provinceValue,this.cityValue,this.districtValue]
            }
            else
            {
              //加载省市
              this.District=[this.provinceValue,this.cityValue]
            }
          }
          else
          {
            //加载省
            this.District=[this.provinceValue]
          }
        }
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    // getAllInfoTree().then(res => {
    //   this.areaList = res.data
    //   const deleteChildren = function(data) {
    //     for (let i in data) {
    //       if (data[i].children.length) {
    //         deleteChildren(data[i].children);
    //       }
    //       else delete data[i].children
    //     }
    //   }
    //   deleteChildren(this.areaList)
    // });
  },
  methods: {
    changeAddress(){
      if(this.changeOnSelect)  //如果是服务商收发货地址
      {
        this.$emit('getFinalAddressDistrict',this.District)
      }
      else this.$emit('getFinalAddressDistrict',this.District.slice(-1)[0])
    },
  }
};
</script>

<style scoped lang="scss">

</style>
